<template>
  <div class="adivice-info">
    <div class="search-content">
      <Col class="panel search-panel" :span="24" style="padding:10px;">
      <Button type="primary" icon="md-arrow-back" @click="backToCompany">返回上一页</Button>
      <Breadcrumb style="display:inline-block;line-height: 36px;margin-left: 15px;">
        <BreadcrumbItem to="/user/temperature">温湿度</BreadcrumbItem>
        <BreadcrumbItem>设备详情</BreadcrumbItem>
      </Breadcrumb>
      </Col>
    </div>
    <Col class="panel tab-panel adevice-tab-panel" style="height:calc(100% - 73px);" :span="24">
    <Row class="video-device-detail">
      <Col span="12" class="clo_14">
      <div class="v-d-14-head">
        <Row style="height: 100px;">
          <Col span="12">
          <dl class="basicInfo-block cf">
            <dt class="basicInfo-item name" style="width:80px;">设备ID&nbsp;:</dt>
            <dd class="basicInfo-item value" style="width: calc(100% - 80px);">
              {{baseInfo.deviceId}}
            </dd>
          </dl>
          <dl class="basicInfo-block cf">
            <dt class="basicInfo-item name" style="width:80px;">设备位置&nbsp;:</dt>
            <dd class="basicInfo-item value" style="width: calc(100% - 80px);" title="selectRow.location">
              {{baseInfo.location}}
            </dd>
          </dl>
          <dl class="basicInfo-block cf">
            <dt class="basicInfo-item name" style="width:80px;">当前状态&nbsp;:</dt>
            <dd class="basicInfo-item value" style="width: calc(100% - 80px);">
              <Tag color="green" v-show="baseInfo.deviceStatus==1">正常</Tag>
              <Tag color="red" v-show="baseInfo.deviceStatus==2">告警</Tag>
              <Tag color="#909399" v-show="baseInfo.deviceStatus !==1 && baseInfo.deviceStatus !==2">未知</Tag>
            </dd>
          </dl>
          </Col>
          <Col span="12">
          <dl class="basicInfo-block cf">
            <dt class="basicInfo-item name" style="width:80px;">设备名称&nbsp;:</dt>
            <dd class="basicInfo-item value autocut" :title="baseInfo.name" style="width: calc(100% - 80px);">
              {{baseInfo.deviceName}}
            </dd>
          </dl>
          <dl class="basicInfo-block cf">
            <dt class="basicInfo-item name" style="width:80px;">更新时间&nbsp;:</dt>
            <dd class="basicInfo-item value" style="width: calc(100% - 80px);">
              {{updateTime}}
            </dd>
          </dl>
          <dl class="basicInfo-block cf">
            <dt class="basicInfo-item name" style="width:80px;">是否在线&nbsp;:</dt>
            <dd class="basicInfo-item value" style="width: calc(100% - 80px);">
              <Tag color="success" v-if="baseInfo.onlineState">在线</Tag>
              <Tag color="error" v-else>离线</Tag>
            </dd>
          </dl>
          </Col>
        </Row>
      </div>
      <div class="v-d-14-body" :class="{'height':!searchData.type}">
        <Card style="width: 100%;overflow: hidden;">
          <div style="width:100%;overflow: hidden;">
            <Col :span="24">
            <DatePicker size="small" :options="options" v-model="searchData.date" type="date" placeholder="选择时间" @on-change="changeTime" style="width: 200px" :clearable="false" />
            <Select size="small" @on-change="typeChange" clearable placeholder="参数类型" v-model="searchData.type" style="width:200px">
              <Option v-for="item in typeLists" :value="item.value" :key="item.value">{{ item.type }}</Option>
            </Select>
            </Col>
            <Col :span="24" style="margin-top:10px;">
            <Table :columns="columns" :data="tabelDatas" border :loading="pageInfo.loading"></Table>
            </Col>
            <Col class="panel page-panel cf" :span="24" style="margin-top: 10px;height: auto;padding: 5px 10px;box-shadow: none;">
            <Page :total="pageInfo.total" size="small" :page-size="15" :current.sync="pageInfo.page" class="fr" @on-change="switchThePaging"></Page>
            </Col>
          </div>
        </Card>
      </div>
      </Col>
      <Col span="12" class="col_10">
      <div class="v-d-10-body">
        <div class="box" :class="{'center':searchData.type == 1}" id="temp-box-1" v-if="searchData.type==1 || !searchData.type"></div>
        <div class="box" :class="{'center':searchData.type == 2}" id="temp-box-2" v-if="searchData.type==2 || !searchData.type"></div>
      </div>
      </Col>
    </Row>
    </Col>
  </div>
</template>
<script>
import { getOdDetail, getOdDate } from '@/api'
const types = [
  {
    type: '温度',
    value: 1
  },
  {
    value: 2,
    type: '湿度'
  },
  {
    value: 3,
    type: '电压'
  }
]

const chartsOption = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      animation: true,
      label: {
        backgroundColor: '#505765'
      }
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '5%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: []
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [],
      type: 'line',
      smooth: true,
      hoverAnimation: false,
      symbolSize: 6,
      showSymbol: false
    }
  ]
}

const addWindowResize = (item, item1) => {
  if (!!item && !!item1) {
    window.onresize = () => {
      item.resize()
      item1.resize()
    }
  } else if (!!item) {
    window.onresize = () => {
      item.resize()
    }
  } else if (!!item1) {
    window.onresize = () => {
      item1.resize()
    }
  }
}

let echartInstanceHum = null
let echartInstanceTem = null
export default {
  mounted() {
    const { id } = this.$route.params
    this.id = id
    this._getOdDetail()
    this._getOdDate()
  },

  beforeDestroy() {
    window.onresize = null
  },

  data() {
    const vm = this
    return {
      options: {
        disabledDate(date) {
          return date && date.valueOf() > Date.now()
        }
      },
      typeLists: [...types],
      updateTime: null,
      // 设备基本信息
      baseInfo: {},

      // 分页信息
      pageInfo: {
        total: 0,
        page: 1,
        loading: false
      },
      pointList: [],
      searchData: {
        type: null,
        date: new Date()
      },
      tabelDatas: [],
      chartMap: [],
      columns: [
        {
          title: '参数名',
          align: 'center',
          key: 'param'
        },
        {
          title: '参数值',
          align: 'center',
          key: 'value'
        },
        {
          title: '更新时间',
          align: 'center',
          key: 'date'
        }
      ]
    }
  },

  methods: {
    _getOdDetail() {
      const vm = this
      let params = {
        id: vm.id
      }
      getOdDetail(params).then(res => {
        if (res.code == 200) {
          const { data } = res
          vm.baseInfo = data
        }
      })
    },

    _getOdDate() {
      const vm = this
      const type = vm.searchData.type
      let date = !!vm.searchData.date
        ? vm.moment(vm.searchData.date).format('YYYY-MM-DD')
        : null
      let params = {
        page: vm.pageInfo.page,
        date,
        size: 15,
        type,
        id: vm.id
      }
      vm.pageInfo.loading = true
      getOdDate(params).then(res => {
        if (res.code == 200) {
          const { showList } = res.data
          vm.tabelDatas = !showList ? [] : showList
          vm.pageInfo.total = res.data.total
          vm.updateTime = res.data.updateTime
          vm._drawCharts(res.data, type, date)
          setTimeout(_ => {
            vm.pageInfo.loading = false
          }, 500)
        } else {
          setTimeout(_ => {
            vm.pageInfo.loading = false
          }, 500)
        }
      })
    },

    // 根据选择的参数类型绘制图片
    _drawCharts(res, type, date) {
      const vm = this
      const { tempArray, dateArray, humiArray } = res
      if (type === 1) {
        vm._drawChartsTemp(dateArray, tempArray, date)
      } else if (type === 2) {
        vm._drawChartsHum(dateArray, humiArray, date)
      } else if (!type) {
        vm._drawChartsTemp(dateArray, tempArray, date)
        vm._drawChartsHum(dateArray, humiArray, date)
      }

      setTimeout(_ => {
        addWindowResize(echartInstanceHum, echartInstanceTem)
      }, 1000)
    },

    // 时间选择器change事件
    changeTime() {
      const vm = this
      vm.pageInfo.page = 1
      vm._getOdDate()
    },

    // 参数类型change事件
    typeChange(value) {
      const vm = this
      vm.pageInfo.page = 1
      vm._getOdDate()
    },

    // 温度图
    _drawChartsTemp(timeArray, temArray, date) {
      if (!timeArray || !temArray) {
        if (!!echartInstanceTem) {
          echartInstanceTem.clear()
        }
        return false
      }

      const vm = this
      let option = JSON.parse(JSON.stringify(chartsOption))
      option.color = ['#B55CBD']
      option.yAxis.name = '℃'
      option['title'] = {
        text: '温度曲线图',
        subtext: date,
        x: 'center',
        align: 'right'
      }
      vm.$nextTick(_ => {
        echartInstanceTem = vm.echarts.init(
          document.getElementById('temp-box-1')
        )
        option.xAxis.data = timeArray
        option.series[0]['name'] = '温度'
        option.series[0].data = temArray
        echartInstanceTem.setOption(option)
      })
    },

    // 湿度图
    _drawChartsHum(timeArray, humArray, date) {
      if (!timeArray || !humArray) {
        if (!!echartInstanceHum) {
          echartInstanceHum.clear()
        }
        return false
      }
      const vm = this
      let option = JSON.parse(JSON.stringify(chartsOption))
      option.color = ['#668ED6']
      option.yAxis.name = '%RH'
      option['title'] = {
        text: '湿度曲线图',
        subtext: date,
        x: 'center',
        align: 'right'
      }

      vm.$nextTick(_ => {
        echartInstanceHum = vm.echarts.init(
          document.getElementById('temp-box-2')
        )
        option.xAxis.data = timeArray
        option.series[0]['name'] = '湿度'
        option.series[0].data = humArray
        echartInstanceHum.setOption(option)
      })
    },

    switchThePaging(index) {
      const vm = this
      vm.pageInfo.page = index
      vm._getOdDate()
    },

    backToCompany() {
      this.$router.push('/user/temperature')
    }
  }
}
</script>
